<!DOCTYPE html>
<html>
<head>

<title><%= title %></title>
<script src="/javascripts/jquery-2.1.1.min.js">
</script>
<script>
var Array = [0,1,2,3];
var t;
var i = 0;


$(document).ready(function(){
AutoChange();
for(var index in Array){
	$("#sub" + index).bind("mouseover",{index:index},ChangeBanner);
	$("#sub" + index).bind("mouseleave",AutoChange);
}

});
function AutoChange(){

	$("#b" + i).hide();
	if(i == 3){
		i = -1;
	}
	$("#b" + ++i).show();
	
	t=setTimeout("AutoChange()",2000);
}
function ChangeBanner(event){
//	if(t)
//		alert("!!!");
	clearTimeout(t);
	var index = event.data.index;
	var item = Array[index];
	$("#b" + item).show();
	for(var n = 0;n < 4;n++)
		if(n != item)
			$("#b" + n).hide();
	i = item -1;

}


</script>
<style type="text/css">
body{

}
input{
	size:15;
}
#main{
	max-width:1240px;
	min-width:768;
	background-color:red;
	margin-left: auto;
	margin-right: auto;
}
#banner{
	width:100%;
	height:350px;
}
#b1,#b2,#b3,#b0{
	width:100%;
	height:350px;
}
#b2,#b3,#b1{
	display:none;
}
#ban{
	width:100%;
	height:350px;
}
#sub_banner{
	height:50px;
	width:100%;
	text-align:center;
}
#sub1,#sub2,#sub3,#sub0{
	height:50px;
	width:25%;
	float:left;
}
#formpage{
	text-align:right;
	width:250px;

}
#formpage,#content,#search{
	float:left;
}
#content{
	width:790px;
	background-color:yellow;
}
#search{
	width:200px;
	text-align:right;
}

</style>
</head>
<body>
